<template>
	<uni-nav-bar title="LIFE" :shadow="true" :statusBar="true" backgroundColor="#e68a4b">
		<template v-slot:left>
			<view class="locationView" @click="chooseCity">
				<image class="location" src="../../static/location.png" />
				<text>{{ $store.state.city ? $store.state.city : po_tips }}</text>
				<image class="arrow" src="../../static/arrow.png" />
			</view>
		</template>
	</uni-nav-bar>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item v-for="(item, index) in adsList" :key="index" @click="gotoAdDetail(item.clickUrl)">
						<image class="swiper-item" mode="scaleToFill" :src="item.bannerPic"></image>
					</swiper-item>
				</swiper>
			</view>
			<template v-for="modle in modleList">
				<uni-card v-if="list[modle.dictCode]" :title="modle.dictLabel" :extra="modle.remark" :is-shadow="false" is-full spacing="0" padding="0">
					<swiper
						:class="list[modle.dictCode].length > numOfCol ? 'swiper-service' : 'swiper-service-sm'"
						:indicator-dots="true"
					>
						<swiper-item v-for="page in Math.ceil(list[modle.dictCode]?.length/(numOfRow*numOfCol))">
							<uni-grid :column="numOfCol" :show-border="false" :square="false">
								<uni-grid-item v-for="(item ,index) in list[modle.dictCode]?.slice((page-1)*(numOfRow*numOfCol), page*(numOfRow*numOfCol))" :index="index" :key="index">
									<view class="grid-item-box" @click="goToService(item)">
										<image class="image" :src="item.serviceIcon" mode="aspectFill" />
										<text class="text">{{item.serviceName}}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
					</swiper>
				</uni-card>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import { getHomepageInfo } from "@/API/home.js"
	let QQMapWX = require('../../static/qqmap-wx-jssdk.min.js')
	
	export default {
		data() {
			return {
				numOfRow: 2,
				numOfCol: 4,
				indicatorDots: true,
				interval: 2000,
				duration: 500,
				autoplay: true,
				list: [],
				po_tips: '定位中',
				position: {}, // 当前位置
				adsList: [], // 广告
				modleList: [] // 模块列表
			}
		},
		onLoad() {
			this.getHomepageInfoList()
			this.startLocation()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getHomepageInfoList()
		},
		onShow() {
			setTimeout(function() {
				if (!getApp().globalData.phoneno || getApp().globalData.phoneno === 'null') {
					// 提示修改资料，并跳转
					uni.showModal({
						confirmColor:'#f00',
						title:'登录',
						content:'登录后才能查看您的服务',
						showCancel: false,
						success(res) {
							uni.navigateTo({
							    //保留当前页面，跳转到应用内的某个页面
							    url: '/pages/mine/userInfo/index'
							});
							// uni.switchTab({
							// 		//保留当前页面，跳转到应用内的某个页面
							// 		url: '/pages/mine/index'
							// });
						}
					});
				};
			}, 800);
		},
		methods: {
			// 定位
			startLocation() {
				const self = this
				uni.getLocation({
					type: 'wgs84',
					geocode:true,
					success: function(res) {
						let qqmapsdk = new QQMapWX({
						  key: 'Y3IBZ-T7MRJ-HPKFM-XURTW-VQVZT-7YBPG'
						})
						// 逆地址解析方法
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(res2) {
								var newCity = ''
								// 取到用户的定位城市，赋值传递出去
								newCity = res2.result.address_component.city
									self.position = {
										city_name: newCity,
										longitude: res.longitude,
										latitude: res.latitude
									}
									self.$store.commit('getCity', self.position)
								// that.commit('m_location/newCityFun')
							},
							fail: function(error) {
								console.error(error)
								self.po_tips = '定位失败'
							}
						})
					},
					fail: function (err) {
						console.log(err.errMsg)
						self.po_tips = '定位失败'
					}
				})
			},
			// 获取首页数据
			getHomepageInfoList() {
				getHomepageInfo().then(res => {
					this.modleList = res.data.serviceClassList
					this.list = res.data.serviceInfoMap
					this.adsList = res.data.topBannerList
					uni.stopPullDownRefresh()
				})
			},
			// 进入服务页面
			goToService(service) {
				uni.navigateTo({
					url: '/pages/home/service/index?serviceType='+service.serviceId+'&title='+service.serviceName
				})
			},
			// 定位选择城市
			chooseCity() {
				uni.navigateTo({
					url: '/pages/home/chooseCity/index'
				})
			},
			gotoAdDetail(url) {
				uni.navigateTo({
					url: '/pages/home/adView/index?url=' + url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,page {
		height:100%
	}
	
	.locationView {
		background-color: red;
		white-space: nowrap;
		background-color: transparent;
		display: flex;
		align-items: center;
		color: white;
		font-size: $uni-font-size-lg;
		.location {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		.arrow {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.container {
		width: 100%;
		height: 100%;
	}
	
	.uni-margin-wrap {
		width: 750rpx;
		height: 340rpx;
		.swiper {
			height: 340rpx;
		}
		.swiper-item {
			width: 750rpx;
			display: block;
			height: 340rpx;
			height: 340rpx;
			text-align: center;
		}
	}
	
	.swiper-service {
		height: 450rpx;
		width: 100%;
	}
	.swiper-service-sm {
		height: 280rpx;
		width: 100%;
	}
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		.image {
			width: 100rpx;
			height: 100rpx;
		}
		
		.text {
			font-size: $uni-font-size-sm;
			margin-top: 5px;
			font-weight: bold;
		}
	}
</style>
